<template>
  <component v-bind="config.props"
             v-model:items="config.props.items"
             v-model:columns="config.props.columns"
             ref="form" 
             :index="index"
             :formData="formData"
             :readonly="readonly"
             :is="config.name"
             :mode="mode"
             style="width: 100%"
             v-model="_value"/>
</template>

<script>
import { computed, ref, toRefs } from 'vue'
import components from '/@/views/setting/workflow/config/ComponentExport'

export default {
    name: 'FormRender',
    components: components,
    props: {
        mode: {
            type: String,
            default: 'DESIGN',
        },
        readonly: {
            type: Boolean,
            default: false,
        },
        modelValue: {
            default: undefined,
        },
        config: {
            type: Object,
            default: () => {
                return {}
            },
        },
        index: {
            type: Number,
            default: 0,
        },
        formData: {
            type: Object,
            default: () => {
                return {}
            },
        },  
    },
    emits: ['update:modelValue'],
    setup(props, context) {
        const { modelValue } = toRefs(props)
        const form = ref()
        const _value = computed({
            get: () => {
                return modelValue.value
            },
            set: val => {
                context.emit('update:modelValue', val)
            }
        })
        const validate = (call) => {
            if (form.value.validate) {
                form.value.validate(call)
            } else {
                call(true)
            }
        }
        return {
            validate,
            _value,
            form
        }
    }
}
</script>

<style scoped lang="scss">
:deep(.el-select), 
:deep(.el-date-editor.el-input, .el-date-editor.el-input__wrapper),
:deep(.el-date-editor.el-input__wrapper){
    width: 100%;
}
</style>